<template>
	<view style="padding: 0 30rpx;">
		<view v-if="!readonly" class="u-text-left ">
			<u-button type="warning" size="mini" @click="chooseFile">{{ text }}</u-button>
		</view>
		<view class="file-item" v-for="(item, index) in fileList" :key="index">
			<view class="top">
				<text v-if="!showInput" class="u-line-1 u-text-left" style="width: 500rpx; color: #2979FF;" @tap="$openFile($getRemoteUrl(item.JumpUrl))">{{ item.Title || item.JumpUrl || item.Value }}</text>
				<view class="u-flex " v-else>
					<u-input :disabled="readonly" v-model="item.Title" :border="true" />
					<!-- <a style="margin-left: 20rpx;" size="small" @tap="toView(item)">查看 -->
					</a>
				</view>
				<u-icon v-if="!readonly" name="close" @click="removeFile(index)"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'file-picker',
	props: {
		text: {
			type: String,
			default: '选择文件'
		},
		value: {
			type: Array,
			default() {
				return [];
			}
		},
		readonly: {
			type: Boolean,
			default: false
		},
		maxCount: {
			type: Number,
			default: 99
		},
		showInput: {
			type: Boolean,
			default: false
		},
		defaultTitle: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			/**
				 *	Key      主键
						Value		 封面图
						Title	   标题/密码 具体再应用场景就一目了然
						TypeId	 类型 
									1. 图片 用 Value 
									2. 视频 用JumpUrl 
									3. 跳转链接 - 用JumpUrl(这个就是百度云啊 第三方视频啊 用到标题密码的类型， 还有可能也需要用到Value封面图字段 但也只是好看的作用,跳转的还是用JumpUrl) 
									4. 文件(同样的也需要用到Value封面图字段 但也只是好看的作用,跳转的还是用JumpUrl)
						JumpUrl	 跳转链接
				 */
			fileList: []
		};
	},
	created() {
		if (this.value) {
			this.fileList = this.value;
		}
	},

	watch: {
		value(val) {
			if (val) {
				this.fileList = val;
			}
		}
	},

	methods: {
		toView(item) {
			// window.location.href = this.$getImageUrl(item.PhotoUrl);
			window.open(this.$getImageUrl(item.PhotoUrl))
		},
		
		chooseFile() {
			let me = this;

			if (me.maxCount <= me.fileList.length) {
				this.$u.toast(`最多上传${me.maxCount}个文件`);
				return false;
			}

			const fileTypes = 'doc,docx,txt,jpg,gif,jpeg,png,pdf,apk,mp4,csv,excel,ai,cad,dwg,pptx,ppt,xlsx,xlx,word,mov'.split(',');
			uni.chooseFile({
				success(res) {
					const file = res.tempFiles[0];
					const filename = file.name;
					const ext = filename.substr(filename.lastIndexOf('.') + 1, filename.length - 1);
					if (fileTypes.indexOf(ext) < 0) {
						me.$u.toast('不允许的文件扩展名');
						return false;
					}

					me.$fileUpload(file).then(res => {
						me.fileList.push({
							Title: me.defaultTitle,
							JumpUrl: res.key,
							PhotoUrl: res.key,
							TypeId: 4
						});

						me.$emit('input', me.fileList);
						me.$emit('change', me.fileList);
					});
				},
				fail(error) {
					console.log(error);
				}
			});
		},

		removeFile(index) {
			let me = this;
			uni.showModal({
				title: '提示',
				content: '您确定要删除此项吗？',
				success: async res => {
					if (res.confirm) {
						me.fileList.splice(index, 1);
						me.$emit('input', me.fileList);
						me.$emit('change', me.fileList);
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.file-item {
	display: flex;
	flex-direction: column;
	margin-top: 16rpx;
	
	.top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
}
</style>
